<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>4.3</title>
</head>
<body>
    1234
</body>
<script>
    let activeEffect = undefined;
    function effect(fn) {
        activeEffect = fn;
        fn();
    }

    const obj = { text: "hello", foo: 'barbar' };
    const bucket = new WeakMap();
    const objProxy = new Proxy(obj, {
    get(target, key, receiver) {
        console.log('activeEffect==', activeEffect)
        if (!activeEffect) return target[key];
        let depsMap = bucket.get(target);
        if (!depsMap) {
        bucket.set(target, (depsMap = new Map()));
        }
        let deps = depsMap.get(key);
        if (!deps) {
        depsMap.set(key, (deps = new Set()));
        }
        deps.add(activeEffect);
        console.log('get==', key, bucket)
        return target[key];
    },
    set(target, key, val, receiver) {
        target[key] = val;
        const depsMap = bucket.get(target);
        if (!depsMap) return;

        const effects = depsMap.get(key);
        console.log('effects==', effects)
        effects && effects.forEach((fn) => {
            console.log('effects==1==', fn)
            fn()
        });
        return true;
    },
    });

    effect(() => {
        console.log("effect1=", objProxy.text);
    });
    effect(() => {
        console.log("effect2=", objProxy.foo);
    });

    setTimeout(() => {
        console.log('------------')
        objProxy.text = "hello vue3";
    }, 1000);
    // setTimeout(() => {
    //     objProxy.foo = "bar";
    // }, 2000);

</script>
</html>